/**
 *  异步搜索框
 *  2021/09/15
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { AjaxInputSearch, tool } from 'knk';
import { Row, Col, Form, message } from 'antd';


const FormItem = Form.Item;

class AjaxInputSearchDemo extends Component {
    onVerifyVal = (val) => {
        if(!val) return true;
        const regNum = /^[0-9]*$/;
        if(regNum.test(val)) {
            message.error('请输入连续数字')
            return false;
        } 
        return true
        
    }

    render() {     
        const { getFieldDecorator } = this.props.form; 
        return (
            <div className = 'ajax-input-search'>
                <div className='m-b'>测试用值：项 和 项目</div>
                <Row>
                    <Col span = { 12 }>
                        <div className='m-b'>默认展示</div>
                        <FormItem >
                            {getFieldDecorator('a', {
                                initialValue: ''
                            })(
                                <AjaxInputSearch 
                                    apiPath = {tool.getPath("search-input-list")}
                                    apikeyWord = "keyWord"
                                    selectItemName = "title"
                                />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span = { 12 }>
                        <div className='m-b'>onVerifyVal 验证表单值, 如输入连续数字</div>
                        <FormItem >
                            {getFieldDecorator('d', {
                                initialValue: ''
                            })(
                                <AjaxInputSearch 
                                    apiPath = {tool.getPath("search-input-list")}
                                    apikeyWord = "keyWord"
                                    selectItemName = "title"
                                    onVerifyVal = { this.onVerifyVal }
                                />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span = { 12 }>
                        <div className='m-b'>显示下拉选择菜单</div>
                        <FormItem >
                            {getFieldDecorator('b', {
                                initialValue: ''
                            })(
                                <AjaxInputSearch 
                                    apiPath = {tool.getPath("search-input-list")}
                                    apikeyWord = "keyWord"
                                    selectItemName = "title"
                                    isSearchBtn = { true }
                                />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span = { 12 }>
                        <div className='m-b'>不显示下拉选择菜单</div>
                        <FormItem >
                            {getFieldDecorator('c', {
                                initialValue: ''
                            })(
                                <AjaxInputSearch 
                                    apiPath = {tool.getPath("search-input-list")}
                                    apikeyWord = "keyWord"
                                    selectItemName = "title"
                                    isSearchBtn = { true }
                                    isdropDown = { false }
                                />
                            )}
                        </FormItem>
                    </Col>
                </Row>
               
            </div>
        );
    }
}

AjaxInputSearchDemo.propTypes = {
   
};

export default Form.create()(AjaxInputSearchDemo);